<template>
  <view class="main">
    <view class="top_search">
      <view class="search">
        <view class="conditions" @click="onClick">
          <view>{{ chooseLabel }}</view>
          <image
            :class="[isShowPopup ? 'rotate' : '', 'arrow']"
            src="/static/img/arrow-down-fill.svg"
            mode="scaleToFill"
          />
        </view>
        <view class="line"></view>
        <u-search
					class="u_search"
					v-if="chooseId != 'push_date'"
          placeholder="请输入内容"
          v-model="keyword"
          bgColor="#F4F5F9"
          @search="clickSearch(keyword)"
          :showAction="false"
        >
        </u-search>
        <view v-if="chooseId == 'push_date'" class="date flex_align">
          <view class="date_l" @click="chooseDate(1)">{{ startDate }}</view> 至
          <view class="date_r" @click="chooseDate(2)">{{ endDate }}</view>
        </view>
      </view>
      <span style="color: #666666" @click="clickSearch(keyword)">搜索</span>
    </view>

    <view class="searchTips" v-if="!isSearch">
      <view class="historyTips" v-if="historyList.length > 0">
        <view class="title">历史搜索</view>
        <image
          class="historyDelete"
          src="/static/img/library/problem/ic_delete.png"
          @click="deleteHistorySearch()"
        >
        </image>
      </view>

      <view v-if="historyList.length > 0">
        <view
          class="type_item"
          v-for="(it, idx) in historyList"
          @click="clickSearch(it)"
          :key="idx"
        >
          {{ it }}
        </view>
      </view>
      <view v-if="hotSearchList.length > 0">
        <view class="title" style="margin-top: 30rpx">热门搜索</view>
        <view
          class="type_item"
          v-for="(item, index) in hotSearchList"
          @click="clickSearch(item.content)"
          :key="index"
        >
          <view>
            <image
              src="/static/img/library/problem/hotIcon.png"
              class="hotIcon"
            ></image>
            {{ item.content }}
          </view>
        </view>
      </view>
    </view>

    <!-- 搜索结果 -->
    <view v-if="dataList.length > 0 && isSearch" class="search_list">
      <scroll-view
        style="height: calc(100vh - 110rpx)"
        class="scroll"
        scroll-y="true"
        refresher-enabled="true"
        :refresher-triggered="isRefreshing"
        @refresherrefresh="reload"
        @scrolltolower="loadMore"
        refresher-background="#F7F7F7"
      >
        <view class="search_count">
          为您找到
          <text class="total">{{ total }}</text
          >条信息
        </view>
        <view
          class="li"
          v-for="(item, index) in dataList"
          :key="index"
          @click="toInfo(item)"
        >
          <mp-html
            :tag-style="
              chooseLabel == '查标题' || chooseLabel == '查文章' ? tagStyle : {}
            "
            container-style="font-size: 32rpx;color: #000;line-height: 45rpx;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;"
            :content="hightLightText(item.title, keyword)"
          >
          </mp-html>
          <view class="footer mt60 flex_between">
            <view class="footer_left">效力注释：{{ item.active_info }}</view>
            <view class="footer_right"
              >发文日期：<text
                :class="chooseLabel == '查时间' ? 'redColor' : ''"
                >{{ item.push_date }}</text
              ></view
            >
          </view>
          <view class="push_number mt10">
            <text>发文字号：</text>
            <mp-html
              class="mp_html"
              :tag-style="chooseLabel == '查文号' ? tagStyle : {}"
              :content="hightLightText(item.push_number, keyword)"
            ></mp-html>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="empty" v-if="dataList.length == 0 && isSearch && !isLoading">
      <view class="search_count">
        为您找到
        <text class="total">{{ total }}</text
        >条信息
      </view>
      <u-empty
        marginTop="100"
        text="未搜索到相关内容"
        mode="search"
        icon="https://xzcs-public-files.oss-cn-beijing.aliyuncs.com/static/coupon/contentVanshi.png"
      ></u-empty>
    </view>

    <!-- 切换搜索条件 -->
    <view v-if="isShowPopup">
      <u-picker
        :show="isShowPopup"
        :columns="columns"
        keyName="label"
        @cancel="isShowPopup = false"
        @confirm="confirm"
      ></u-picker>
    </view>

    <!-- 搜索条件弹窗 -->
    <view class="dateShow" v-if="dateShow">
      <u-datetime-picker
        :show="dateShow"
        v-model="date"
        mode="date"
        @cancel="dateCancel"
        @confirm="dateConfirm"
      ></u-datetime-picker>
    </view>
  </view>
</template>

<script
  type="text/javascript"
  src="plus-confusion://../law/dis/search/index"
></script>

<style lang="scss">
.main {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #fff;

  .searchTips {
    flex-shrink: 0;
    padding: 0 30rpx;
    background: #fff;

    .historyTips {
      width: 100%;
      height: 50rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .historyDelete {
        width: 50rpx;
        height: 50rpx;
        padding: 10rpx;
        margin-right: 30rpx;
      }
    }

    .title {
      font-size: 30rpx;
      font-weight: 700;
      color: #333333;
    }

    .type_item {
      display: inline-block;
      margin: 24rpx 20rpx 0 0;
      padding: 0 30rpx;
      min-height: 56rpx;
      line-height: 56rpx;
      background: #f8f9fa;
      border-radius: 28rpx;
      font-size: 22rpx;
      color: #666666;
    }

    .hotIcon {
      width: 30rpx;
      height: 30rpx;
    }
  }

  /deep/.scroll {
    width: 100vw;
    background: #f7f7f7;
    box-sizing: border-box;
    padding: 0rpx 30rpx 0 30rpx;
  }

  .search_list {
    height: 100%;
    // padding-bottom: 40rpx;
    background: #f7f7f7;

    .search_count {
      padding-top: 20rpx;
      font-size: 24rpx;
      color: #9e9e9e;
      line-height: 28rpx;

      .total {
        color: #1c87f3;
        font-size: 28rpx;
      }
    }

    .li {
      width: 690rpx;
      position: relative;
      padding: 30rpx;
      box-sizing: border-box;
      margin-top: 20rpx;
      background: #ffffff;
      box-shadow: 0 6rpx 17rpx 3prx rgba(0, 0, 0, 0.02);
      border-radius: 20rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .li_content {
      font-size: 24rpx;
      color: #999999;
      line-height: 21px;
      margin-top: 30rpx;
    }

    .time {
      color: #999999;
      font-size: 26rpx;
      display: flex;
      justify-content: flex-end;
      margin-top: 10rpx;
    }
  }

  .empty {
    padding: 30rpx;

    .search_count {
      font-size: 24rpx;
      color: #9e9e9e;
      line-height: 28rpx;

      .total {
        color: #1c87f3;
        font-size: 28rpx;
      }
    }
  }
}

.top_search {
  width: 100vw;
  box-sizing: border-box;
  padding: 20rpx 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  background: #fff;

  .search {
    width: 608rpx;
    background: #f4f5f9;
    border-radius: 545rpx;
    padding: 5rpx 30rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
  }

	.u_search{
		padding: 5rpx 0rpx;
	}
}

/deep/ .u-search__content__icon {
  display: none;
}

.conditions {
  display: flex;
  align-items: center;

  .arrow {
    width: 50rpx;
    height: 38rpx;
    //动画延迟
    transition: all 0.5s;
  }
}

.line {
  height: 36rpx;
  width: 1rpx;
  margin: 0 18rpx;
  background: #bbbbbb;
}

.rotate {
  transform: rotate(180deg);
}

.date {
  width: 75%;
  padding: 20rpx;
  height: 100%;
  justify-content: space-around;
  font-size: 24rpx;
  color: #999999;

  .date_l,
  .date_r {
    width: 118rpx !important;
    white-space: nowrap;
  }
}

.footer {
  display: flex;
  // width: 690rpx;
  color: #999999;
  font-size: 24rpx;
  /* margin-top: 100rpx; */
}

.footer_left {
  flex: 0 0 40%;
  font-size: 24rpx;
  white-space: nowrap;
}

.footer_right {
  flex: 0 0 40%;
  font-size: 24rpx;
}


.push_number {
  display: flex;
  align-items: center;
  margin-top: 10rpx;
  font-size: 24rpx;
  color: #999999;
}

.redColor {
  color: #fa3534;
}
</style>
